<template>
  <div style="margin: 10px">
  </div>
  <el-card>
    <el-table :data="tableData.records" border stripe style="width: 100%">
      <el-table-column prop="userId" label="ID" />
      <el-table-column prop="userName" label="用户名"/>
      <el-table-column prop="password" label="密码">已隐藏</el-table-column>
      <el-table-column prop="email" label="邮箱"/>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button @click="handleEdit(row)" size="small" type="primary">编辑</el-button>
          <el-button @click="handleChangeRole(row.userId)" size="small" plain>修改角色</el-button>
          <el-button @click="handleRemove(row.userId)" size="small" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="">
      <el-pagination layout="prev, pager, next" background :total="total" @current-change="initData"/>
    </div>
  </el-card>


<!--  User add/edit dialog-->
  <el-dialog v-model="addEditActiveFlag" title="编辑" width="500px" destroy-on-close>
    <el-form :model="userForm" ref="addEditForm">
      <el-form-item label="ID" prop="userId">
        <el-input v-model="userForm.userId" autocomplete="off" disabled/>
      </el-form-item>
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="userForm.userName" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="userForm.password" autocomplete="off" disabled/>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="userForm.email" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleDialogClose(addEditForm as FormInstance)">关闭</el-button>
        <el-button type="primary" @click="handleDialogSubmit(addEditForm as FormInstance)">提交</el-button>
      </span>
    </template>
  </el-dialog>

<!--  Edit user role dialog-->
  <el-dialog v-model="editRoleActiveFlag" title="修改角色" @close="editRoleActiveFlag=false" destroy-on-close center>
    <UserRole :user-id="userIdForRole" class="transfer"/>

    <template #footer>
      <el-button @click="handleChangeRoleSubmit" type="primary">确定</el-button>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";
import {getUserList, removeUser, updateUserInfo, updateUserRole} from "@/api/user.ts";
import {UserData} from "@/type/UserData.ts";
import {ElMessage, FormInstance} from "element-plus";
import {Page} from "@/type/PageRecord.ts";
import UserRole from "@/components/UserRole.vue";
import {MainStore} from "@/store/MainStore.ts";

// Data area
const tableData= ref({} as Page<UserData>)
const total = ref(0)
const addEditActiveFlag = ref(false)
const userForm = ref({
  userId: 0,
  userName: '',
  password: '',
  email: ''
});
const addEditForm = ref<FormInstance>()
const editRoleActiveFlag = ref(false)
const userIdForRole = ref(0)


onMounted(() => {

  initData(0)

})

function initData(currentPage: number){
  getUserList(currentPage).then(res => {
    tableData.value = res.data
    total.value = res.data.total
  })
}


const handleEdit = (row: UserData) => {
  addEditActiveFlag.value = true
  userForm.value = row
}

const handleRemove = (id: number) => {

  removeUser(id).then(res =>{

    initData(0)
    ElMessage.success(res.data)
  })
}

const handleChangeRole = (userId: number) => {
  userIdForRole.value = userId
  editRoleActiveFlag.value = true
}

const handleDialogSubmit = (formRef: FormInstance) => {

  updateUserInfo(userForm.value).then(res => {
    initData(0)
    ElMessage.success(res.data)
  })

  formRef.resetFields()
  addEditActiveFlag.value = false
}

const handleDialogClose = (formRef: FormInstance) => {
  addEditActiveFlag.value = false
  formRef.resetFields()
}

const handleChangeRoleSubmit = () => {

  const mainStore = MainStore()

  updateUserRole(userIdForRole.value, mainStore.userRoleIds as number[]).then(_ => {

    editRoleActiveFlag.value =false
    ElMessage.success('Operate success')
  })
}
</script>

<style lang="scss">

.el-pagination{
  justify-content: center;
}

.transfer{

  margin-left: 15%;
}
</style>